<template>
  <div class="page is-show">
    <!-- 封面 -->
    <div class="page-content">
      <div class="row">
        <form class="form-horizontal">
          <div class="form-group col-xs-8">
            <label class="col-xs-1 control-label"></label>
            <label class="col-xs-11 control-label font-bold text-left cid"></label>
          </div>
          <div class="form-group col-xs-12 top-margin">
            <div class="row">
              <div class="text-center">
                <h3 class="h3">消防设施维护保养</h3>
              </div>
            </div>
            <div class="row">
              <div class="text-center bottom-margin">
                <h1 class="h1">报告书</h1>
              </div>
            </div>
          </div>
          <div class="text-center col-xs-12">
            <div class="form-group col-xs-12 valid_cow">
              <div class="col-xs-4">
                <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="委托单位：">
              </div>
              <div class="col-xs-6">
                <input type="text" id="owner" name="owner" class="form-control border-bottom font-bold" v-model="formData.owner">
              </div>
            </div>
            <div class="form-group col-xs-12 valid_cow">
              <div class="col-xs-4">
                <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="项目名称：">
              </div>
              <div class="col-xs-6">
                <input type="text" id="proName" name="proName" class="form-control border-bottom font-bold" v-model="formData.proname">
              </div>
            </div>
            <div class="form-group col-xs-12  valid_cow">
              <div class="col-xs-4">
                <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="项目地址：">
              </div>
              <div class="col-xs-6">
                <input type="text" name="proAddr" id="proAddr" class="editable form-control font-bold border-bottom" v-model="formData.proaddr">
              </div>
            </div>
            <div class="form-group col-xs-12  valid_cow">
              <div class="col-xs-4">
                <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="维保单位：">
              </div>
              <div class="col-xs-6">
                <input type="text" name="company" id="company" class="form-control border-bottom font-bold" v-model="formData.company">
              </div>
            </div>
            <div class="form-group col-xs-12  valid_cow">
              <div class="col-xs-4">
                <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="维保周期：">
              </div>
              <div class="col-xs-6">
                <input type="text" id="period" name="period" class="form-control border-bottom font-bold" v-model="formData.period">
              </div>
            </div>
          </div>

          <div class="form-group col-xs-12  valid_cow">
            <div class="text-right col-xs-5"></div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="作业人员：">
            </div>
            <div class="col-xs-5">
              <input type="text" name="writeDate" readonly disabled class="form-control no-border font-bold">
            </div>
          </div>
          <div class="form-group col-xs-12 valid_cow">
            <div class="col-xs-1"></div>
            <div class="col-xs-4">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="(维保专用章)">
            </div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="编制/审核人：">
            </div>
            <div class="col-xs-5">
              <input type="text" name="writerName" id="writerName" readonly disabled class="form-control no-border font-bold">
            </div>
          </div>
          <div class="form-group col-xs-12 valid_cow">
            <div class="text-right col-xs-5"></div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="编制日期：">
            </div>
            <div class="col-xs-5 no-padding">
              <div class="col-xs-2 no-padding">
                <input type="text" name="writeDate" class="form-control no-border font-bold no-padding-right" v-model="writeDate.year">
              </div>
              <div class="col-xs-1 no-padding">
                <span class="form-control no-border font-bold no-padding-left">年</span>
              </div>
              <div class="col-xs-1 no-padding">
                <input type="text" name="writeDate" class="form-control no-border font-bold no-padding" v-model="writeDate.month">
              </div>
              <div class="col-xs-1 no-padding">
                <span class="form-control no-border font-bold no-padding-left">月</span>
              </div>
              <div class="col-xs-1 no-padding">
                <input type="text" name="writeDate" class="form-control no-border font-bold no-padding" v-model="writeDate.days">
              </div>
              <div class="col-xs-1 no-padding">
                <span class="form-control no-border font-bold no-padding-left">日</span>
              </div>
            </div>
          </div>
          <div class="col-xs-12"></div>
          <div class="col-xs-12" style="height: 10px;">
            <div class="col-xs-1"></div>
            <div class="hr col-xs-9"></div>
            <div class="col-xs-1"></div>
          </div>
          <div class="col-xs-12">
            <div class="col-xs-1"></div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="资质编号：">
            </div>
            <div class="col-xs-3">
              <input type="text" placeholder="请输入资质编号" name="aptitude" id="aptitude" class="editable form-control no-border no-padding-left font-bold" v-model="formData.aptitude">
            </div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="公司网站：">
            </div>
            <div class="col-xs-3">
              <input type="text" placeholder="请输入公司网站" name="siteUrl" id="siteUrl" class="editable form-control no-border no-padding-left font-bold" v-model="formData.siteurl">
            </div>
            <div class="col-xs-1"></div>
          </div>
          <div class="col-xs-12">
            <div class="col-xs-1"></div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="电话/传真：">
            </div>
            <div class="col-xs-3">
              <input type="text" placeholder="请输入电话/传真" name="phoneFax" id="phoneFax" class="editable form-control no-border no-padding-left font-bold" v-model="formData.phonefax">
            </div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="电子邮箱：">
            </div>
            <div class="col-xs-3">
              <input type="text" placeholder="请输入电子邮箱" name="email" id="email" class="editable form-control no-border no-padding-left font-bold" v-model="formData.email">
            </div>
            <div class="col-xs-1"></div>
          </div>
          <div class="col-xs-12">
            <div class="col-xs-1"></div>
            <div class="col-xs-2">
              <input type="text" readonly disabled class="form-control no-border font-bold text-right" value="公司地址：">
            </div>
            <div class="col-xs-8">
              <input type="text" placeholder="请输入公司地址" name="address" id="address" class="editable form-control no-border no-padding-left font-bold" v-model="formData.address">
            </div>
            <div class="col-xs-1"></div>
          </div>
        </form>
      </div>
    </div>
    <div class="page-break"></div>
    <!-- 目录  -->
    <div class="page-content">
      <div class="row">
        <form class="form-horizontal mreport-directory">
          <div class="form-group col-xs-8">
            <label class="col-xs-1 control-label"></label>
            <label class="col-xs-11 control-label font-bold text-left cid"></label>
          </div>
          <div class="form-group col-xs-12 top-margin">
            <div class="row">
              <div class="text-center bottom-margin">
                <h1 class="h1">报告目录</h1>
              </div>
            </div>
          </div>
          <div class="text-center col-xs-12">
            <div class="form-group col-xs-12  valid_cow">
              <label class="col-xs-3 control-label"><span>●</span></label>
              <div class="col-xs-6">
                <span>消防设施维护保养报告简述</span>
              </div>
            </div>
            <div :class="{ 'hide-directory':!directory.attachment1 }" class="form-group col-xs-12  valid_cow">
              <label class="col-xs-3 control-label">
                <el-checkbox class="attachment-check" v-model="directory.attachment1" @change="directoryChange">显示本章节</el-checkbox>
                <span class="attachment-title">●</span>
              </label>
              <div class="col-xs-6">
                <span class="attachment-title">附件{{directoryOrder.attachment1}} 消防设施维护保养计划及执行情况</span>
              </div>
            </div>
            <div :class="{ 'hide-directory':!directory.attachment2 }" class="form-group col-xs-12  valid_cow">
              <label class="col-xs-3 control-label">
                <el-checkbox class="attachment-check" v-model="directory.attachment2" @change="directoryChange">显示本章节</el-checkbox>
                <span class="attachment-title">●</span>
              </label>
              <div class="col-xs-6">
                <span class="attachment-title">附件{{directoryOrder.attachment2}} 消防控制室值班记录</span>
              </div>
            </div>
            <div :class="{ 'hide-directory':!directory.attachment3 }" class="form-group col-xs-12  valid_cow">
              <label class="col-xs-3 control-label">
                <el-checkbox class="attachment-check" v-model="directory.attachment3" @change="directoryChange">显示本章节</el-checkbox>
                <span class="attachment-title">●</span>
              </label>
              <div class="col-xs-6">
                <span class="attachment-title">附件{{directoryOrder.attachment3}} 故障维修记录及作业照片</span>
              </div>
            </div>
            <div :class="{ 'hide-directory':!directory.attachment4 }" class="form-group col-xs-12  valid_cow">
              <label class="col-xs-3 control-label">
                <el-checkbox class="attachment-check" v-model="directory.attachment4" @change="directoryChange">显示本章节</el-checkbox>
                <span class="attachment-title">●</span>
              </label>
              <div class="col-xs-6">
                <span class="attachment-title">附件{{directoryOrder.attachment4}} 巡查记录及作业照片</span>
              </div>
            </div>
            <div :class="{ 'hide-directory':!directory.attachment5 }" class="form-group col-xs-12  valid_cow">
              <label class="col-xs-3 control-label">
                <el-checkbox class="attachment-check" v-model="directory.attachment5" @change="directoryChange">显示本章节</el-checkbox>
                <span class="attachment-title">●</span>
              </label>
              <div class="col-xs-6">
                <span class="attachment-title">附件{{directoryOrder.attachment5}} 保养记录及作业照片</span>
              </div>
            </div>
            <div :class="{ 'hide-directory':!directory.attachment6 }" class="form-group col-xs-12  valid_cow">
              <label class="col-xs-3 control-label">
                <el-checkbox class="attachment-check" v-model="directory.attachment6" @change="directoryChange">显示本章节</el-checkbox>
                <span class="attachment-title">●</span>
              </label>
              <div class="col-xs-6">
                <span class="attachment-title">附件{{directoryOrder.attachment6}} 测试记录及作业照片</span>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="page-break"></div>
  </div>
</template>
<script>
export default {
  name: 'Cover',
  props: {
    initData: {
      type: Object,
    },
    pronum: {},
    directoryOrder: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      formData: {
        owner: '', // 委托单位
        proname: '', // 项目名称
        pronum: '', // 项目编号
        proaddr: '', // 项目地址
        company: '', // 维保单位
        period: '', // 维保周期
        writedate: '', // 编制日期
        aptitude: '', // 资质编号
        siteurl: '', // 公司网站
        phonefax: '', // 电话传真
        email: '', // 电子邮箱
        address: '', // 公司地址
        startTime: '', // 开始时间
        endTime: '', // 结束时间
      },
      // 编制日期
      writeDate: {
        year: '',
        month: '',
        days: '',
      },
      directory: {
        attachment1: true,
        attachment2: true,
        attachment3: true,
        attachment4: true,
        attachment5: true,
        attachment6: true,
      },
    }
  },
  created() {
    let that = this
    if (that.initData) {
      that.formData.owner = that.initData.owner // 委托单位
      that.formData.proname = that.initData.proname // 项目名称
      that.formData.pronum = that.initData.pronum // 项目编号
      that.formData.proaddr = that.initData.proaddr // 项目地址
      that.formData.company = that.initData.company // 维保单位
      that.formData.period = that.initData.period // 维保周期
      that.formData.writedate = that.initData.writedate // 编制日期
      that.formData.aptitude = that.initData.aptitude // 资质编号
      that.formData.siteurl = that.initData.siteurl // 公司网站
      that.formData.phonefax = that.initData.phonefax // 电话传真
      that.formData.email = that.initData.email // 电子邮箱
      that.formData.address = that.initData.address // 公司地址
      that.formData.startTime = that.initData.startTime // 开始时间
      that.formData.endTime = that.initData.endTime // 结束时间
      if (that.initData.writedate) {
        that.writeDate.year = that.initData.writedate.slice(0, 4)
        that.writeDate.month = that.initData.writedate.slice(5, 7)
        that.writeDate.days = that.initData.writedate.slice(8, 10)
      }
    }
  },
  methods: {
    getData(needChecked) {
      let that = this
      this.formData.directory = this.directory
      // 校验必填
      if (needChecked) {
        if (!that.formData.aptitude || that.formData.aptitude == '') {
          that.$message({
            message: '请填写资质编号！',
            type: 'warning',
          })
          return false
        } else if (!that.formData.siteurl || that.formData.siteurl == '') {
          that.$message({
            message: '请填写公司网站！',
            type: 'warning',
          })
          return false
        } else if (!that.formData.phonefax || that.formData.phonefax == '') {
          that.$message({
            message: '请填写电话/传真！',
            type: 'warning',
          })
          return false
        } else if (!that.formData.email || that.formData.email == '') {
          that.$message({
            message: '请填写电子邮箱！',
            type: 'warning',
          })
          return false
        } else if (!that.formData.address || that.formData.address == '') {
          that.$message({
            message: '请填写公司地址！',
            type: 'warning',
          })
          return false
        } else {
          that.formData.writedate = `${that.writeDate.year}年${that.writeDate.month}月${that.writeDate.days}日` // 编制日期

          return that.formData
        }
      } else {
        that.formData.writedate = `${that.writeDate.year}年${that.writeDate.month}月${that.writeDate.days}日` // 编制日期

        return that.formData
      }
    },
    directoryChange() {
      this.$emit('chooseDirectory', Object.assign({}, this.directory))
    },
  },
  watch: {
    pronum(val, oldVal) {
      if (val != oldVal) {
        this.formData.pronum = val
      }
    },
  },
}
</script>
<style lang="scss">
.print-wrap {
  .hide-directory {
    .attachment-title {
      opacity: 0.4;
    }
  }
  .attachment-check {
    margin-right: 20px;
  }
  .mreport-directory {
    .control-label {
      padding-top: 0 !important;
    }
  }
  &.is-submited {
    .print-none,
    .hide-directory,
    .attachment-check {
      display: none;
    }
    textarea {
      border: none;
    }
  }
  &.is-exporting {
    width: 793px;
    .page-break {
      display: none;
    }
    .page-wrap .form-horizontal .form-group {
      margin-left: 0;
      margin-right: 0;
    }
    .page-content {
      padding: 20px 0 0;
    }
  }
  .page-index{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
